Day 2 標題有特別說到是建置TypeScript的預設環境,代表開發者其實可以自行決定Compiler如何檢查與轉換程式碼,而 tsconfig檔案 就是TypeScript用來提供開發者設定Compiler的檢查與轉換行為。
今天主要目的是知道可設定的常用組態,希望不會像前幾天一樣過於冗長(汗)。
如前言所說,tsconfig檔是讓TypeScript知道如何去檢查與轉換程式碼的檔案,如果根目錄有這份檔案,Compiler就會遵循 tsconfig 內設定好的組態去執行它的任務,而這些組態大致就是用來:
動手以前要再次提醒的是,tsconfig檔必須被放置在專案根目錄。此外前面也有說到tsconfig檔可以自行設定根目錄,總之確認檔案的確是放在根目錄即可。
tsconfig檔可供設定的組態至少有一百個,但不是所有組態都需要設定,這邊只需先知道常用組態就好。
如果是第一次建立檔案,在這之前可先使用一道指令:
tsc --init
此時專案內會產生一份 tsonfig.json。
tsonfig.json 檔案內是 compilerOptions 其中八大子類別的組態預設值和說明,例如:專案本身(Projects)、程式語言與環境相關 (Language and Environment)、模組相關 (Modules)、JavaScript支援方式 (JavaScript Support)、輸出相關的 (Emit)、兼容性限制 (Interop Constraints)、型別檢查 (Type Checking)和完整性檢查(Completeness)。
但tsonfig檔可供設定的組態不只有這些,在TSConfig的官方文件內首先包含與 compilerOptions 同層級的其他根領域(Root Fields)組態像是 files
、extends
、includes
、excludes
、references
,而 compilerOptions 底下也有其他如 Editor Support、Output Formatting、Watch Options 等子類別,由於官方文件有更詳細的說明,這裡就不贅述了。
為了檔案內容的簡潔,這裡不使用 tsc --init
產生的檔案,而是自行建立一份 tsconfig.json
,以下範例整理一些重要和常用的組態,並附上一些可參考選用的組態:
{
"compilerOptions": {
"target": "ES5", // 編譯後的JavaScript程式碼版本
/* Modules */
"module": "CommonJS", // 編譯後產生的模組形式 (註:設定為commonjs通常是為了能讓程式在Node上執行)
"rootDir": "./src", // 設定編譯根目錄
/* JavaScript Support */
"allowJs": true, // 允許js檔案是否被TypeScript Compilet檢查 (官方建議可設"checkJs"為true來取得錯誤報告)
"checkJs": true, // 會對js檔案進行型別檢查且輸出錯誤報告
/* Emit */
"sourceMap": true, // 可建立來源檔案與輸出的js檔案關係map
"outDir": "./public", // 編譯器編譯後的js檔案放置處 (註:public通常是要部署專案到伺服器用的資料夾)
"removeComments": true, // 不會輸出註解
"noEmit": true, // 可避免輸出不符型別檢查的js檔案, 例如Day 1的string型態變數再賦值number值的範例
/* Interop Constraints */
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true, // 對import進來的模組檔名強制作大小寫轉換, 可避免如 import LearnTS.ts 寫成 import learnTS.ts 的大小寫錯誤
/* Type Checking */
"strict": true
"noImplicitAny": true // 不允許未指定型別的變數
"alwaysStrict":true // 採用JavaScript嚴格模式檢查型別, 並且會在輸出的每一份JS檔案首行加上 "use strict"
},
"files": ["type.ts", "type.spec.ts"], // 編譯檔案白名單, 意即指定要編譯的檔案 (不可用glob指定檔案或資料夾)
"include": ["src"], // 編譯白名單, 意即指定要編譯的檔案和資料夾
"exclude": ["node_modules", "**/*.spec.ts"] // 編譯黑名單, 意即指定不要編譯的檔案和資料夾
}
以上範例有幾個要點需注意:
files
只適合檔案少的專案且不能用glob模式匹配方式去指定多個資料夾或檔案;include
;include
包含的資料夾底下,但匹配到 exclude
內有指定的檔名,如 src
資料夾下有檔名符合 \*\*/*.spec.ts
形式的檔案,則檔名匹配到 \*\*/*.spec.ts
的檔案都不會被編譯;files
中的檔案即使有匹配到 exclude
指定檔名,如範例的 type.spec.ts
,還是會被編譯。由這幾點舉例可知檔案被編譯的優先權是 files
> exclude
> include
然後要留意的是文件介紹中有提到
When input files are specified on the command line, tsconfig.json files are ignored.
意思是如果像 Day 2 一樣用 tsc index
的方式去編譯檔案(index.ts),則編譯器會忽略tsconfig檔案的組態設定去編譯這份檔案。
後記
事實上 tsconfig 檔案可以是 tsconfig.json 或 jsconfig.json,這兩者之中的其中一種檔案(檔名)都可對TypeScript Compiler的編譯行為作設定,只不過通常都是用 tsconfig.json。
參考資料
What is a tsconfig.json
TypeScript: TSConfig Reference
Understanding the glob pattern in Node.js